<template>
  <b-container fluid>
    <b-row>
      <b-col lg="12">
        <iq-card body-class="p-0">
          <template v-slot:body>
            <div class="iq-edit-list">
              <tab-nav :pills="true" class="iq-edit-profile d-flex">
                <tab-nav-items
                  class="col-md-6 p-0"
                  :active="true"
                  href="#personal-information"
                  title="个人信息"
                />
                <tab-nav-items class="col-md-6 p-0" :active="false" href="#chang-pwd" title="修改密码" />
              </tab-nav>
            </div>
          </template>
        </iq-card>
      </b-col>
      <b-col lg="12">
        <div class="iq-edit-list-data">
          <tab-content id="pills-tabContent-2">
            <tab-content-item :active="true" id="personal-information">
              <ValidationObserver v-slot="{ handleSubmit }">
                <form @submit.prevent="handleSubmit(onSubmitUpdateUserInfo)">
                  <iq-card>
                    <template v-slot:headerTitle>
                      <h4 class="card-title">个人信息</h4>
                    </template>
                    <template v-slot:body>
                      <b-form-group class="row align-items-center">
                        <b-col md="12">
                          <div class="profile-img-edit">
                            <b-img
                              :src="user.avatar"
                              class="profile-pic height-150 width-150"
                              alt="profile-pic"
                            />
                            <input type="hidden" v-model="user.avatar" />
                            <div class="p-image">
                              <div class="position-relative h-100">
                                <i class="ri-pencil-line upload-button width-100" style="left:0;"></i>
                                <b-form-file
                                  class="h-100 position-absolute"
                                  accept="image/*"
                                  style="opacity: 0;left:0;"
                                  @change="previewImage"
                                ></b-form-file>
                              </div>
                            </div>
                          </div>
                        </b-col>
                      </b-form-group>
                      <b-row align-v="center">
                        <b-form-group class="col-md-6" label="登录账号" label-for="username">
                          <ValidationProvider
                            name="登录账号"
                            rules="required|isAccount"
                            v-slot="{ errors }"
                          >
                            <b-form-input
                              id="username"
                              v-model="user.username"
                              type="text"
                              placeholder="Username"
                              :class="(errors.length > 0 ? ' is-invalid' : '')"
                            ></b-form-input>
                            <div class="invalid-feedback">
                              <span>{{ errors[0] }}</span>
                            </div>
                          </ValidationProvider>
                        </b-form-group>
                        <b-form-group class="col-md-6" label="真实姓名:" label-for="realname">
                          <ValidationProvider
                            name="真实姓名"
                            rules="required|isChineseName"
                            v-slot="{ errors }"
                          >
                            <b-form-input
                              id="realname"
                              type="text"
                              placeholder="Real Name"
                              v-model.trim="user.realname"
                              :class="(errors.length > 0 ? ' is-invalid' : '')"
                            ></b-form-input>
                            <div class="invalid-feedback">
                              <span>{{ errors[0] }}</span>
                            </div>
                          </ValidationProvider>
                        </b-form-group>
                        <b-form-group class="col-md-6" label="生日:" label-for="birthday">
                          <b-form-input
                            id="birthday"
                            type="date"
                            v-model="user.birthday"
                            placeholder="Birthday"
                          ></b-form-input>
                        </b-form-group>
                        <b-form-group class="col-md-6" label="邮箱:" label-for="email">
                          <ValidationProvider
                            name="Email"
                            rules="required|email"
                            v-slot="{ errors }"
                          >
                            <b-form-input
                              id="email"
                              type="text"
                              placeholder="Email"
                              v-model.trim="user.email"
                              :class="(errors.length > 0 ? ' is-invalid' : '')"
                            ></b-form-input>
                            <div class="invalid-feedback">
                              <span>{{ errors[0] }}</span>
                            </div>
                          </ValidationProvider>
                        </b-form-group>
                        <b-form-group class="col-md-6" label="手机号码:" label-for="phone">
                          <ValidationProvider
                            name="手机号码"
                            rules="required|isPhone"
                            v-slot="{ errors }"
                          >
                            <b-form-input
                              id="phone"
                              type="text"
                              placeholder="Phone Number"
                              v-model.trim="user.phone"
                              :class="(errors.length > 0 ? ' is-invalid' : '')"
                            ></b-form-input>
                            <div class="invalid-feedback">
                              <span>{{ errors[0] }}</span>
                            </div>
                          </ValidationProvider>
                        </b-form-group>
                        <b-form-group class="col-sm-6" label="性别:" label-class="d-block">
                          <b-form-radio
                            inline
                            v-model="user.gender"
                            v-for="gender of genderState"
                            :key="gender.id"
                            :value="gender.dictValue"
                          >{{gender.dictLabel}}</b-form-radio>
                        </b-form-group>
                        <b-form-group class="col-sm-12" label="地址:">
                          <b-form-textarea
                            name="address"
                            v-model="user.address"
                            style="line-height: 22px;"
                            rows="3"
                          ></b-form-textarea>
                        </b-form-group>
                      </b-row>
                      <b-button type="submit" variant="primary" class="mr-2">提交更改</b-button>
                      <b-button type="reset" variant="none" class="iq-bg-danger">清空信息</b-button>
                    </template>
                  </iq-card>
                </form>
              </ValidationObserver>
            </tab-content-item>
            <tab-content-item :active="false" id="chang-pwd">
              <ValidationObserver v-slot="{ handleSubmit }">
                <form @submit.prevent="handleSubmit(onSubmitChangePassword)">
                  <iq-card>
                    <template v-slot:headerTitle>
                      <h4 class="card-title">修改密码</h4>
                    </template>
                    <template v-slot:body>
                      <b-form-group>
                        <label for="cpass">当前密码:</label>
                        <b-link href="javascripe:void();" class="float-right">初始化密码</b-link>
                        <!-- <b-link href="javascripe:void();" class="float-right">Forgot Password</b-link> -->
                        <ValidationProvider name="当前密码" rules="required" v-slot="{ errors }">
                          <b-form-input
                            @focusout="changePassword()"
                            type="password"
                            id="cpass"
                            v-model="password.currentPassword"
                            placeholder="Current Password"
                            :class="(errors.length > 0 ? ' is-invalid' : '')"
                          ></b-form-input>
                          <div class="invalid-feedback">
                            <span>{{ errors[0] }}</span>
                          </div>
                        </ValidationProvider>
                      </b-form-group>
                      <b-form-group class="col-md-6" label="新密码:" label-for="pass">
                        <ValidationProvider
                          name="新密码"
                          rules="required|isPassword"
                          v-slot="{ errors }"
                        >
                          <b-form-input
                            v-model="password.newPassword"
                            type="password"
                            placeholder="Password"
                            :class="(errors.length > 0 ? ' is-invalid' : '')"
                          ></b-form-input>
                          <div class="invalid-feedback">
                            <span>{{ errors[0] }}</span>
                          </div>
                        </ValidationProvider>
                      </b-form-group>
                      <b-form-group class="col-md-6" label="验证新密码:" label-for="rpass">
                        <ValidationProvider
                          vid="repeat_password"
                          name="验证新密码"
                          rules="required|confirmed:新密码"
                          v-slot="{ errors }"
                        >
                          <b-form-input
                            v-model="password.repeat_password"
                            type="password"
                            placeholder="Repeat Password"
                            :class="(errors.length > 0 ? ' is-invalid' : '')"
                          ></b-form-input>
                          <div class="invalid-feedback">
                            <span>{{ errors[0] }}</span>
                          </div>
                        </ValidationProvider>
                      </b-form-group>
                      <b-button type="submit" variant="primary" class="mr-2">提交更改</b-button>
                      <b-button type="reset" variant="none" class="iq-bg-danger">取消更改</b-button>
                    </template>
                  </iq-card>
                </form>
              </ValidationObserver>
            </tab-content-item>
          </tab-content>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import { core } from '../../config/pluginInit'
import { mapGetters } from 'vuex'

export default {
  name: 'ProfileEdit',
  created () {
    this.$request.fetchUserInfoById(this.userId)
      .then(res => {
        this.user = res.data
      }).catch(err => {
        this.$message.error(err?.msg || err)
      })
  },
  mounted () {
    core.index()
  },
  data () {
    return {
      user: {
        avatar: require('../../assets/images/user/user-11.png'),
        username: '',
        realname: '',
        email: '',
        birthday: '',
        address: '',
        phone: '',
        gender: ''
      },
      password: {
        newPassword: '',
        currentPassword: '',
        repeat_password: ''
      }

    }
  },
  methods: {
    onSubmitUpdateUserInfo () {
      this.$request.fetchUserUpdate(this.userId, this.user)
        .then(res => {
          this.$message.success('修改成功！')
          this.$router.push('/user/user-list')
        })
        .catch(err => {
          this.$message.error(err?.msg || err)
        })
    },
    onSubmitChangePassword () {
      this.$request.fetchPasswordUpdate(this.userId, this.password)
        .then(res => {
          this.$message.success(res.msg)
        })
        .catch(err => {
          this.$message.error(err?.msg || err)
        })
    },
    previewImage: function (event) {
      const formData = new FormData()
      formData.append('avatar', event.target.files[0])
      this.$request.fetchAvatarUpload(formData).then(res => {
        this.user.avatar = res.data.path
      })
    },
    changePassword: function () {
    }
  },
  computed: {
    ...mapGetters({ genderState: 'Dict/genderState' }),
    userId () {
      return this.$route.params.id
    }
  }
}
</script>
